<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>服务信息设置</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .user-info-area{
            height: auto;
            width: 90%;
            margin: auto;
            overflow: hidden;
        }
        .user-info-area ul li{
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }

        .li-type{
            line-height: 1.6rem;
            display: block;
            color: #666;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }
        .input-area{
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
            color: #666;
        }
        .input-area-me{
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            left: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            outline: none;
        }
        .select-local-area{
            font-size: 0.28rem;
            width: 70%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }
        .select-local-area select{
            width: 32%;
            height: 100%;
            outline: none;
            color: #666;
        }
        .select-local-area select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            font-size: 0.28rem;
            /*很关键：将默认的select选择框样式清除*/
            background-color: transparent;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            /*在选择框的最右侧中间显示小箭头图片*/
            background-image: url("../../../master/img/bottomIcon.jpg");
            background-repeat: no-repeat;
            background-position: 1rem center;
            background-size: 0.2rem;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            /*padding-right: 14px;*/
        }


        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        .select-local-area select::-ms-expand { display: none; }

        /*设置主体z-index*/
        .main-body-area{z-index: 100}

        /*以下为遮罩层*/
        .modal-box{
            z-index: 100000;
            background-color: black;
            opacity: 0.5;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .show-box-area,.show-box-type,.show-box-kind{
            overflow: hidden;
            z-index: 100000;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 1rem;
        }
        .local-input-area {
            z-index: 100000;
            text-align: center;
            width: 6.6rem;
            height: auto;
            margin: auto;
            background-color: white;
            margin-top: 1rem;
            position: relative;
        }
        .select-ul{
            overflow: hidden;
            padding-bottom: 0.4rem;
            padding-top: 0.4rem;
            width: 90%;
            height: auto;
            margin: auto;
        }
        .type-list-ul{
            overflow: hidden;
            padding-bottom: 0.4rem;
            padding-top: 0.4rem;
            width: 90%;
            height: auto;
            margin: auto;
        }
        .select-ul li{
            width: 1.5rem;
            float: left;
            height: 0.5rem;
            margin: 0.24rem;
        }
        .type-list-ul li{
            margin: 0.24rem 0 0.24rem 0.2rem;
            float: left;
            height: 0.5rem;
        }
        .select-ul li p input{
            display: none;
        }
        .type-list-ul li p input{display: none;}
        .select-ul li lib,.type-list-ul li lib{
            color: #666;
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            background-color: transparent;
            border: 1px solid #ADADAD;
            border-radius: 0.1rem;
        }
        .select-btn-area{
            padding: 0.15rem 0;
            height: 1rem;
            width: 60%;
            margin: auto;
        }
        .cancel-btn{float: left}
        .ensure-btn{float: right}
        .cancel-btn,.ensure-btn{
            width: 1.5rem;
            font-size: 0.25rem;
            height: 0.5rem;
            color: #666;
            background-color: white;
            border-radius: 0.1rem;
            border: 1px solid #666;
        }
        /*选矿*/
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.55rem;
        }
        .type-list-ul li p{
            height: 0.5rem;
            display: inline-block;
            line-height: 0.55rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }
        /*右侧箭头*/
        .area-btn,.type-btn,.area-server{
            background-image: url(../../../master/img/bottomIcon.jpg);
            background-repeat: no-repeat;
            background-position: 5rem center;
            background-size: 0.2rem;
        }
        /*时间至*/
        .time-to{margin-right: 0.5rem;color: #666}
        .config-btn-area{
            width: 50%;
            margin: 1rem auto;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.28rem;
        }
        .config-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        /*以下为单选框组*/
        .choice{
            position: relative;
        }
        .choice .radio{
            width: 1rem;
            position: relative;
            display: inline-block;
            font-weight: 400;
            color: #666;
            padding-left: 0.5rem;
            cursor: pointer;
            padding-top: 0.05rem;
        }
        .choice .radio input{
            position: absolute;
            left: -9999px;
        }
        .choice .radio i{
            display: block;
            position: absolute;
            top: 0.1rem;
            left: 0;
            width: 0.2rem;
            height: 0.2rem;
            outline: 0;
            border: 1px solid #666;
            border-radius: 50%;
            transition: border-color .3s;
            -webkit-transition: border-color .3s;
        }
        .choice .radio input:checked+i{
            border-color: #666;
        }
        .choice .radio input+i:after{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: red;
            opacity: 0;
            transition: opacity .1s;
            -webkit-transition: opacity .1s;
        }
        .choice .radio input:checked+i:after{
            opacity: 1;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>服务信息设置</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="user-info-area">
        <ul>
            <li>
                <span class="li-type">服务类目</span>
                <input class="input-area type-btn" readonly type="text" value="请选择服务类目">
            </li>
            <li>
                <span class="li-type">服务类型</span>
                <input class="input-area area-server" readonly type="text" value="请选择服务类型">
            </li>
            <li>
                <span class="li-type">服务区域</span>
                <input class="input-area area-btn" readonly type="text" value="请选择服务区域">
            </li>
            <li style="border-bottom: none">
                <span class="li-type">服务时间</span>
                <div class="select-local-area">
                    <select><option>周一</option></select>
                    <span class="time-to">至</span>
                    <select><option>周五</option></select>
                </div>
            </li>
            <li>
                <div class="select-local-area">
                    <select><option>00:00</option></select>
                    <span class="time-to">至</span>
                    <select><option>12:00</option></select>
                </div>
            </li>
            <li>
                <span class="li-type">人数</span>
                <input class="input-area" readonly type="number" value="12">
            </li>
            <li>
                <span class="li-type">货车数量</span>
                <input class="input-area" readonly type="number" value="12">
            </li>
            <li>
                <span class="li-type">货车大小</span>
                <div class="input-area">
                    <div class="choice">
                        <label class="radio">小
                            <input type="radio" value="1" name="radio" checked><i></i></label>
                        <label class="radio">中
                            <input type="radio" value="2" name="radio"><i></i></label>
                        <label class="radio">大
                            <input type="radio" value="3" name="radio"><i></i></label>
                    </div>
                </div>
            </li>
            <li>
                <span class="li-type">货车吨位</span>
                <input class="input-area" readonly type="number" value="12">
            </li>
            <li>
                <input class="input-area-me"  type="text" placeholder="介绍以下自己吧～">
            </li>
        </ul>
        <div class="config-btn-area">
            <button class="config-btn">确认</button>
        </div>
    </div>
</div>
<!--遮罩层-->
<div class="modal-box hide"></div>
<!--服务地区-->
<div class="show-box-area hide">
    <div class="local-input-area">
        <ul class="select-ul">
            <li>
                <p>
                    <input name="area" type="checkbox" value="1" id="check1"/>
                    <label for="check1">桥西区</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="2" id="check2"/>
                    <label for="check2">桥西区</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="3" id="check3"/>
                    <label for="check3">桥西区</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="4" id="check4"/>
                    <label for="check4">桥西区</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="5" id="check5"/>
                    <label for="check5">桥西区</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="6" id="check6"/>
                    <label for="check6">桥西区</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn">取消</button>
            <button class="ensure-btn">确定</button>
        </div>
    </div>
</div>
<!--服务类目-->
<div class="show-box-type hide">
    <div class="local-input-area">
        <ul class="type-list-ul">
            <li>
                <p>
                    <input name="area" type="checkbox" value="1" id="checkOne"/>
                    <label for="checkOne">送货到楼下</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="2" id="checkTwo"/>
                    <label for="checkTwo">送货到家</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="3" id="checkThree"/>
                    <label for="checkThree">送货到家并安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="4" id="checkFour"/>
                    <label for="checkFour">安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="5" id="checkFive"/>
                    <label for="checkFive">维修</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="6" id="checkSix"/>
                    <label for="checkSix">返货</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn">取消</button>
            <button class="ensure-btn">确定</button>
        </div>
    </div>
</div>
<!--服务类型-->
<div class="show-box-kind hide">
    <div class="local-input-area">
        <ul class="type-list-ul">
            <li>
                <p>
                    <input name="area" type="checkbox" value="1" id="one"/>
                    <label for="one">送货到楼下</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="2" id="two"/>
                    <label for="two">送货到家</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="3" id="three"/>
                    <label for="three">送货到家并安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="4" id="four"/>
                    <label for="four">安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="5" id="five"/>
                    <label for="five">维修</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="area" type="checkbox" value="6" id="six"/>
                    <label for="six">返货</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn">取消</button>
            <button class="ensure-btn">确定</button>
        </div>
    </div>
</div>
<script src="../../../master/lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // 隐藏
        $('.cancel-btn').click(function () {
            $('.modal-box').addClass('hide');//隐藏遮罩层
            $('.show-box-area').addClass('hide');//隐藏服务地区选择
            $('.show-box-type').addClass('hide');//隐藏服务类目选择
            $('.show-box-kind').addClass('hide');//隐藏服务类型选择
            document.documentElement.style.overflow = "scroll";//使网页恢复可滚
        });
        //显示隐藏控制---服务地区选择
        $('.area-btn').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-area').removeClass('hide');

            document.documentElement.style.overflow = "hidden";//禁止滚动
        });
        // 服务类目选择
        $('.type-btn').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-type').removeClass('hide');
            document.documentElement.style.overflow = "hidden";//禁止滚动
        });
        // 服务类型选择
        $('.area-server').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-kind').removeClass('hide');
            document.documentElement.style.overflow = "hidden";//禁止滚动
        });

    });
</script>
</body>
</html>